<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Select - Multiple Value</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Select Item: Multiple Value</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content test-content">

        <ion-item>
          <ion-label>Toppings</ion-label>
          <ion-select id="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
            <ion-select-option value="bacon">Bacon</ion-select-option>
            <ion-select-option value="olives">Black Olives</ion-select-option>
            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
            <ion-select-option value="peppers">Green Peppers</ion-select-option>
            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
            <ion-select-option value="onions">Onions</ion-select-option>
            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
            <ion-select-option value="pineapple">Pineapple</ion-select-option>
            <ion-select-option value="sausage">Sausage</ion-select-option>
            <ion-select-option value="Spinach">Spinach</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Car Features</ion-label>
          <ion-select id="carFeatures" multiple="true">
            <ion-select-option value="backupcamera">Backup Camera</ion-select-option>
            <ion-select-option value="heatedseats">Headted Seats</ion-select-option>
            <ion-select-option value="keyless">Keyless Entry</ion-select-option>
            <ion-select-option value="navigation">Navigation</ion-select-option>
            <ion-select-option value="parkingassist">Parking Assist</ion-select-option>
            <ion-select-option value="sunroof">Sun Roof</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Pets</ion-label>
          <ion-select id="pets" multiple>
              <ion-select-option value="cat">Cat</ion-select-option>
              <ion-select-option value="dog">Dog</ion-select-option>
              <ion-select-option value="turtle">Turtle</ion-select-option>
              <ion-select-option value="fish">Fish</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-select id="disabled" multiple disabled>
            <ion-select-option selected="true">Selected Text</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Statuses</ion-label>
          <ion-select id="status" multiple>
            <ion-select-option value="selected" selected="true">Selected</ion-select-option>
            <ion-select-option value="default">Default</ion-select-option>
            <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
          </ion-select>
        </ion-item>

        <p aria-hidden="true" padding>
          <code>toppings: <span id="toppingsResult"></span></code><br>
          <code>carFeatures: <span id="carFeaturesResult"></span></code><br>
          <code>pets: <span id="petsResult"></span></code><br>
        </p>

        <form>
          <ion-list padding-vertical>
            <ion-item>
              <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Select</ion-label>
              <ion-select multiple="true">
                <ion-select-option selected>1</ion-select-option>
                <ion-select-option>2</ion-select-option>
                <ion-select-option selected>3</ion-select-option>
              </ion-select>
            </ion-item>
            <ion-button expand="block" type="submit">Submit</ion-button>
          </ion-list>
        </form>

        <ion-item>
          <ion-label floating>Floating label</ion-label>
          <ion-select multiple="true">
            <ion-select-option value="bacon">Bacon</ion-select-option>
            <ion-select-option value="olives">Black Olives</ion-select-option>
            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
            <ion-select-option value="peppers">Green Peppers</ion-select-option>
            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
            <ion-select-option value="onions">Onions</ion-select-option>
            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
            <ion-select-option value="pineapple">Pineapple</ion-select-option>
            <ion-select-option value="sausage">Sausage</ion-select-option>
            <ion-select-option value="Spinach">Spinach</ion-select-option>
          </ion-select>
        </ion-item>

      </ion-content>

    <script>
      var toppings = document.getElementById('toppings');
      toppings.value = ['bacon', 'xcheese'];

      var carFeatures = document.getElementById('carFeatures');

      var pets = document.getElementById('pets');
      pets.value = ['cat', 'dog'];

      setResults(toppings);
      setResults(carFeatures);
      setResults(pets);

      toppings.addEventListener('ionChange', function(ev) {
        setResults(toppings);
      });
      carFeatures.addEventListener('ionChange', function(ev) {
        setResults(carFeatures);
      });
      pets.addEventListener('ionChange', function(ev) {
        setResults(pets);
      });

      function setResults(select) {
        if (select.id) {
          var resultsEl = document.getElementById(select.id + 'Result');
          if (resultsEl) {
            resultsEl.innerHTML = select.value;
          }
        }
      }
    </script>
  </ion-app>
</body>
</html>



